<template>
  <div class="contact-page">
    <div class="contact-container">
      <div class="contact-info">
        <h2 class="section-title">联系我</h2>
        <p class="contact-description">如果您有任何问题或合作意向，请随时与我联系。我会尽快回复您的消息。</p>
        
        <div class="contact-methods">
          <div class="contact-method">
            <i class="fas fa-envelope"></i>
            <div>
              <h3>邮箱</h3>
              <p>contact@xingchen.com</p>
            </div>
          </div>
          
          <div class="contact-method">
            <i class="fas fa-phone"></i>
            <div>
              <h3>电话</h3>
              <p>+86 123 4567 8900</p>
            </div>
          </div>
          
          <div class="contact-method">
            <i class="fas fa-map-marker-alt"></i>
            <div>
              <h3>地址</h3>
              <p>中国 北京市朝阳区</p>
            </div>
          </div>
        </div>
        
        <div class="social-links">
          <a v-for="(social, index) in socials" 
             :key="index"
             :href="social.link"
             target="_blank"
             class="social-link">
            <i :class="social.icon"></i>
            <span>{{ social.name }}</span>
          </a>
        </div>
      </div>
      
      <form class="contact-form" @submit.prevent="handleSubmit">
        <div class="form-group">
          <label for="name">姓名</label>
          <input 
            type="text" 
            id="name" 
            v-model="form.name"
            required
            placeholder="请输入您的姓名">
        </div>
        
        <div class="form-group">
          <label for="email">邮箱</label>
          <input 
            type="email" 
            id="email" 
            v-model="form.email"
            required
            placeholder="请输入您的邮箱">
        </div>
        
        <div class="form-group">
          <label for="subject">主题</label>
          <input 
            type="text" 
            id="subject" 
            v-model="form.subject"
            required
            placeholder="请输入邮件主题">
        </div>
        
        <div class="form-group">
          <label for="message">消息</label>
          <textarea 
            id="message" 
            v-model="form.message"
            required
            rows="6"
            placeholder="请输入您的消息内容"></textarea>
        </div>
        
        <button type="submit" class="submit-btn" :disabled="isSubmitting">
          <span v-if="!isSubmitting">发送消息</span>
          <i v-else class="fas fa-spinner fa-spin"></i>
        </button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Contact',
  data() {
    return {
      form: {
        name: '',
        email: '',
        subject: '',
        message: ''
      },
      isSubmitting: false,
      socials: [
        { name: 'GitHub', icon: 'fab fa-github', link: 'https://github.com' },
        { name: 'Twitter', icon: 'fab fa-twitter', link: 'https://twitter.com' },
        { name: 'LinkedIn', icon: 'fab fa-linkedin-in', link: 'https://linkedin.com' },
        { name: 'WeChat', icon: 'fab fa-weixin', link: '#' }
      ]
    }
  },
  methods: {
    async handleSubmit() {
      this.isSubmitting = true
      try {
        // 这里添加发送消息的逻辑
        await new Promise(resolve => setTimeout(resolve, 1500)) // 模拟API调用
        alert('消息已发送！')
        this.form = {
          name: '',
          email: '',
          subject: '',
          message: ''
        }
      } catch (error) {
        alert('发送失败，请稍后重试')
      } finally {
        this.isSubmitting = false
      }
    }
  }
}
</script>

<style scoped>
.contact-page {
  padding: 20px 0;
}

.contact-container {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 40px;
  background: var(--card-bg);
  border-radius: 28px;
  padding: 40px;
  box-shadow: 0 15px 35px rgba(0, 0, 0, 0.05);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.5);
}

.contact-description {
  color: var(--gray);
  margin-bottom: 30px;
  line-height: 1.6;
}

.contact-methods {
  margin-bottom: 30px;
}

.contact-method {
  display: flex;
  align-items: center;
  gap: 15px;
  margin-bottom: 20px;
}

.contact-method i {
  width: 50px;
  height: 50px;
  background: var(--primary-light);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
}

.contact-method h3 {
  color: var(--dark);
  margin-bottom: 5px;
}

.contact-method p {
  color: var(--gray);
}

.social-links {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.social-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 20px;
  background: white;
  border-radius: 12px;
  text-decoration: none;
  color: var(--dark);
  transition: var(--transition);
}

.social-link:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.social-link i {
  color: var(--primary);
  font-size: 1.2rem;
}

.contact-form {
  background: white;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
}

.form-group {
  margin-bottom: 20px;
}

.form-group label {
  display: block;
  margin-bottom: 8px;
  color: var(--dark);
  font-weight: 500;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 1rem;
  transition: var(--transition);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.submit-btn {
  width: 100%;
  padding: 14px;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: var(--transition);
}

.submit-btn:hover:not(:disabled) {
  background: var(--primary-light);
  transform: translateY(-2px);
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .contact-container {
    grid-template-columns: 1fr;
  }
  
  .contact-info {
    order: 2;
  }
  
  .contact-form {
    order: 1;
  }
}

@media (max-width: 600px) {
  .contact-container {
    padding: 20px;
  }
  
  .social-links {
    grid-template-columns: 1fr;
  }
}
</style> 